<!-- 登录页面 -->
<template>
<div class="con">
    <div class="tou"><h1>中 华 好 诗 词 </h1></div>
    <div class="login">
    
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="用户名" prop="userName">
    <el-input type="text" v-model="ruleForm.userName" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item label="密码" prop="pwd">
    <el-input type="password" v-model="ruleForm.pwd" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item label="验证码" prop="code">
    <el-input v-model="ruleForm.code"></el-input>
  </el-form-item>
  <el-form-item>
    <span v-html="captcha" @click="getCaptcha"></span>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </el-form-item>
</el-form>
    </div>
</div>

</template>

<script>
 export default {
    data() {

      var checkAge = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('验证码不能为空'));
        }
        callback()
      };
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('用户名不能为空'));
        } else {
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('密码不能为空'));
        }else {
          callback();
        }
      };
      return {
        ruleForm: {
          userName: '',
          pwd: '',
          code: '',

        },
        captcha:'',
        rules: {
          userName: [
            { validator: validatePass, trigger: 'blur' }
          ],
          pwd: [
            { validator: validatePass2, trigger: 'blur' }
          ],
          code: [
            { validator: checkAge, trigger: 'blur' }
          ]
        }
      };
    },

    methods: {
      submitForm(formName) {  //登录
        this.$refs[formName].validate(async (valid) => { 
          if (valid) {
            let result = await this.$axios.post('login',this.ruleForm)
            let code = result.data.code
            let token = result.data.token

            if(code =='200'){
              this.open1()
              localStorage.setItem('token',token) //存储token
              this.$router.push({name:'admin'})  //登录成功转跳上传页面
            }else if(code=='301'){
              this.open3()
            }else{
              this.open2()
            }
        } else {
            console.log('请输入用户名密码及其验证码!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      async getCaptcha(){
       let result =  await this.$axios.get('captcha')
       this.captcha = result.data
       console.log(result)
      },
      open1() {
        this.$message({
          type:'success',
          message:'登录成功',
          duration:1500
        })
      },
      open2() {
        this.$message.error('登录失败');
      },
      open3(){
        this.$message.warning('验证码错误')
      },
   
    },

    mounted() {
        this.getCaptcha()
    },
  }
</script>

<style scoped>
    .login{
        widows: 25%;
        padding: 250px 650px;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
    }
    .con{
        width: 100%;
        position: absolute;
        top:0;
        bottom: 0;
        background: url('../assets/bg.png') ;
        background-size: cover;
    }
    .tou{
       padding: 100px ;
    }
</style>